{include file="public/header" /}
<style>
    .guigeuploadimg{
        width: 50px;
        height: 50px;
    }
    .close-upimg{
        display: none;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>商品详情</h5>
                </div>
                <div class="ibox-content layui-form">
                    <div class="layui-row layui-col-space10 layui-form-item ">
                        <input type="hidden" name="good_id" value="{$data.good_id}" />
                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
                            <label class="layui-form-label">商品名称：</label>
                            <div class="layui-input-block">
                                <input type="text" disabled name="good_name" lay-verify="required" placeholder="商品名称" class="layui-input" value="{$data.good_name}">
                            </div>
                        </div>
                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
                            <label class="layui-form-label">缩略图：</label>
                            <input type="hidden" name="good_thumb" id="lay-img" lay-verify="image" value="{$data.good_thumb}">
                            <div class="layui-input-block">
                                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                    预览图：
                                    <div class="layui-upload-list" id="lay-list">
                                        <img class="layui-append-img" src="{$data.good_thumb}" onerror="this.src='/static/admin/images/no_img.jpg'">
                                    </div>
                                </blockquote>
                            </div>
                        </div>

                        <div class="layui-form-item layui-col-md-offset1 layui-col-md10">
                            <label class="layui-form-label">图片详情轮播</label>
                            <div class="layui-input-block">
                                <input type="hidden" name="del" id="del2" value="">
                                <input type="hidden" id="hid2" value="{$data.good_image}">
                                <input type="hidden" name="good_image" id="photo2" value="{$data.good_image}">
                                <div id="uploader2" class="container-s">
                                    <div class="queueList">
                                        <div class="placeholder">
                                            <div id="filePicker2"></div>
                                            <p>或将照片拖到这里</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
                            <label class="layui-form-label">总库存：</label>
                            <div class="layui-input-block">
                                <input type="number" disabled min="0" name="good_stock" value="{$data.good_stock}" lay-verify="required" placeholder="总库存" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
                            <label class="layui-form-label">价格：</label>
                            <div class="layui-input-block">
                                <input type="text" disabled name="good_price" value="{$data.good_price}" lay-verify="required" placeholder="商品价格" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-col-md-offset1 layui-col-md10">
                            <label class="layui-form-label">商品详情：</label>
                            <div class="layui-input-block" id="LAY_editor" lay-verify="editor">
                                <p>{$data.good_content}</p>
                            </div>
                        </div>
                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8" id="user_id">
                            <label class="layui-form-label">学校(非必填)：</label>
                            <div class="layui-input-block">
                                <select disabled name="good_school" xm-select="select1" xm-select-search="" xm-select-radio="" xm-select-search-type="dl">
                                    <option value="">没有关联学校</option>
                                    {volist name='school' id='s'}
                                    <option value="{$s.school_id}" {if $s.school_id == $data.good_school}selected{/if} >{$s.school_id}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
                            <label class="layui-form-label">商品状态：</label>
                            <div class="layui-input-block">
                                {if $data.good_status == 1}
                                <input type="text" disabled name="good_price" value="上架" lay-verify="required" class="layui-input">
                                {else /}
                                <input type="text" disabled name="good_price" value="下架" lay-verify="required" class="layui-input">
                                {/if}
                            </div>
                        </div>
                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
                            <label class="layui-form-label">创建时间：</label>
                            <div class="layui-input-block">
                                <input type="text" disabled name="good_price" value="{$data.good_create_time}" lay-verify="required" class="layui-input">

                            </div>
                        </div>
                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
                            <label class="layui-form-label">修改时间：</label>
                            <div class="layui-input-block">
                                <input type="text" disabled name="good_price" value="{$data.good_update_time}" lay-verify="required" class="layui-input">

                            </div>
                        </div>
                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
                            <label class="layui-form-label">好评率：</label>
                            <div class="layui-input-block">
                                <input type="text" disabled name="good_price" value="{$data.good_score}%" lay-verify="required" class="layui-input">

                            </div>
                        </div>
                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
                            <label class="layui-form-label">评论数：</label>
                            <div class="layui-input-block">
                                <input type="text" disabled name="good_price" value="{$data.good_comment}" lay-verify="required" class="layui-input">

                            </div>
                        </div>
                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
                            <label class="layui-form-label">销量：</label>
                            <div class="layui-input-block">
                                <input type="text" disabled name="good_price" value="{$data.good_sales}" lay-verify="required" class="layui-input">

                            </div>
                        </div>
                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
                            <label class="layui-form-label">点击量：</label>
                            <div class="layui-input-block">
                                <input type="text" disabled name="good_price" value="{$data.good_click}" lay-verify="required" class="layui-input">

                            </div>
                        </div>

                        <!--规格 start -->
                        <div style="z-index: 9999999;clear: both;">
                        <div class="control-group">
                            <label class="control-label"> </label>
                            <div class="controls">
                                <button class="btn btn-primary" type="button">商品规格</button>
                                <button id="update_table" class="btn btn-success" type="button" style="display: none"></button>
                            </div>
                            {volist name='guige' id='g'}
                            <div class="control-group lv1">
                                <label class="control-label">规格名称</label>
                                <div class="controls">
                                    <input type="text" name="lv1" class="layui-input guige1" style="width: 150px;display: inline-table;"
                                           placeholder="规格名称" value="{$g.attr_group_name}" readonly>
                                    <button class="btn btn-primary add_lv2" type="button">规格名称</button>
                                </div>
                                <div class="controls lv2s">
                                    {volist name='g.attr_list' id='ga'}
                                    <div style="margin-top: 5px;">
                                        <input type="text" name="lv2" placeholder="参数名称" class="layui-input guige2"
                                               style="width: 150px;display: inline-table;" value="{$ga.attr_name}" readonly>
                                        <button class="btn btn-danger remove_lv2" type="button">参数名称</button>
                                    </div>
                                    {/volist}
                                </div>
                            </div>
                            {/volist}
                        </div>
                        <div id="lv_table_con" class="control-group">
                            <label class="control-label">规格项目表</label>
                            <div class="controls">
                                <div id="lv_table">
                                </div>
                            </div>
                        </div>
                        </div>

                        <input type="hidden" name="gg_json" id="gg_json" value="" />
                        <input type="hidden" name="attr_json" id="attr_json" value="" />
                        <input type="hidden" name="havechange" id="havechange" value="1" />
                        <!--规格  end -->

                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
                            <div class="layui-input-block">
                                <button class="layui-btn btn-primary" onclick="history.go(-1)">返回</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{include file="public/footer" /}
<script>
    var n2 = wk.uploads({num:8,type:'png,jpg,gif',attr:2,status:'update'})
    var editor = wk.wang({elem:'#LAY_editor'});

</script>

</body>
</html>
<script>
    $(document).ready(function() {
        var attrs = {$atrrs};


        $('#update_table').on('click', function() {
            //----生成表格时候判断能不能生成 start ---
            if($('.guige1').length > 0){
                var ggstatus = true;
                var ggstr = '';
                var ggvalue = [];
                $('.guige1').each(function (i,d) {
                    var now_gg_value = d.value.trim();
                    if(now_gg_value == ''){
                        ggstatus = false;
                        ggstr = '规格项不能为空！';
                        return false;
                    }else{
                        if(ggvalue.indexOf(now_gg_value) == -1){
                            ggvalue.push(now_gg_value);
                        }
                    }
                });
                if (ggstatus == false) {
                    alert(ggstr);
                    return;
                }
                if (ggvalue.length != $('.guige1').length) {
                    alert('请删除值重复的规格项！');
                    return;
                }
            }
            //----生成表格时候判断能不能生成 end -----
            var lv1Arr = $('input[name="lv1"]');
            if (!lv1Arr || lv1Arr.length == 0) {
                $('#lv_table_con').hide();
                $('#lv_table').html('');
                return;
            }
            for (var i = 0; i < lv1Arr.length; i++) {
                var lv2Arr = $(lv1Arr[i]).parents('.lv1').find('input[name="lv2"]');
                if (!lv2Arr || lv2Arr.length == 0) {
                    alert('请先删除无参数的规格项！');
                    return;
                }
                //参数值的判断-start-
                var ggstatus = true;
                var ggstr = '';
                var ggvalue = [];
                lv2Arr.each(function (i,d) {
                    var now_gg_value = d.value.trim();
                    if(now_gg_value == ''){
                        ggstatus = false;
                        ggstr = '参数值不能为空！';
                        return false;
                    }else{
                        if(ggvalue.indexOf(now_gg_value) == -1){
                            ggvalue.push(now_gg_value);
                        }
                    }
                })
                if (ggstatus == false) {
                    alert(ggstr);
                    return;
                }
                if (ggvalue.length != lv2Arr.length) {
                    alert('请删除值重复的参数项！');
                    return;
                }
                //参数值的判断-end-
            }

            var tableHTML = '';
            tableHTML += '<table class="table table-bordered">';
            tableHTML += '    <thead>';
            tableHTML += '        <tr>';
            for (var i = 0; i < lv1Arr.length; i++) {
                tableHTML += '<th width="50">' + $(lv1Arr[i]).val() + '</th>';
            }
            tableHTML += '            <th width="20">价格</th>';
            tableHTML += '            <th width="20">库存</th>';
            tableHTML += '            <th width="20">货号</th>';
            tableHTML += '            <th width="20">重量</th>';
            tableHTML += '            <th width="20">规格图片</th>';
            tableHTML += '        </tr>';
            tableHTML += '    </thead>';
            tableHTML += '    <tbody>';

            var numsArr = new Array();
            var idxArr = new Array();
            //numsArr记录每个规格又多少个参数，并用idxarr记录规格数组下标 方便后边标记name
            for (var i = 0; i < lv1Arr.length; i++) {
                numsArr.push($(lv1Arr[i]).parents('.lv1').find('input[name="lv2"]').length);
                idxArr[i] = 0;
            }

            var len = 1;
            var rowsArr = new Array();
            for (var i = 0; i < numsArr.length; i++) {
                //len  记录参数总行数
                len = len * numsArr[i];

                var tmpnum = 1;
                for (var j = numsArr.length - 1; j > i; j--) {
                    tmpnum = tmpnum * numsArr[j];
                }
                //当前规格每个参数所占行数
                rowsArr.push(tmpnum);
            }

            for (var i = 0; i < len; i++) {
                tableHTML += '        <tr data-row="' + (i+1) + '">';

                var name = '';
                var name2 = '';
                for (var j = 0; j < lv1Arr.length; j++) {
                    var n = parseInt(i / rowsArr[j]);
                    if (j == 0) {
                    } else if (j == lv1Arr.length - 1) {
                        n = idxArr[j];
                        if (idxArr[j] + 1 >= numsArr[j]) {
                            idxArr[j] = 0;
                        } else {
                            idxArr[j]++;
                        }
                    } else {
                        var m = parseInt(i / rowsArr[j]);
                        n = m % numsArr[j];
                    }

                    var text = $(lv1Arr[j]).parents('.lv1').find('input[name="lv2"]').eq(n).val();
                    var obj2 = $(lv1Arr[j]).parents('.lv1').find('input[name="lv2"]').eq(n);
                    var attrid2 = $('.guige2').index(obj2) - 0 + 1;
                    if (j != lv1Arr.length - 1) {
                        name += text + '/';
                        name2 += attrid2 + ':';
                    } else {
                        name += text;
                        name2 += attrid2;
                    }

                    if (i % rowsArr[j] == 0) {
                        tableHTML += '<td width="50" rowspan="' + rowsArr[j] + '" data-rc="' + (i+1) + '_' + (j+1) + '">' + text + '</td>';
                    }
                }
//
                var attrsprice = '';
                var attrsstock = '';
                var attrsno = '';
                var attrsweight = '';
                var attrspic_url = '';
                var attrspic_url2 = '';
                var havechange = $('#havechange').val();
                if(havechange == 1){
                    attrspic_url = attrs[name2]['pic_url'];
                    attrspic_url2 = attrs[name2]['pic_url'];
                    if(attrs[name2]['pic_url'] == ''){
                        attrspic_url = '';
                        attrspic_url2 = '__IMG__/addpic.png';
                    }
                    attrsprice = attrs[name2]['price'];
                    attrsstock = attrs[name2]['stock'];
                    attrsno = attrs[name2]['no'];
                    attrsweight = attrs[name2]['weight'];
                }else{
                    attrspic_url = '';
                    attrspic_url2 = '__IMG__/addpic.png';
                }

                tableHTML += '<td width="20"><input lay-verify="required" disabled class="layui-input attrinput" value="'+attrsprice+'" type="text" data-attrstr="' + name + '" data-attrid="' + name2 + '" /></td>';
                tableHTML += '<td width="20"><input lay-verify="required" disabled class="layui-input attrinput" value="'+attrsstock+'" type="number" min="0" data-attrstr="' + name + '" data-attrid="' + name2 + '" /></td>';
                tableHTML += '<td width="20"><input lay-verify="required" disabled class="layui-input attrinput" value="'+attrsno+'" type="text" data-attrstr="' + name + '" data-attrid="' + name2 + '" /></td>';
                tableHTML += '<td width="20"><input lay-verify="required" disabled class="layui-input attrinput" value="'+attrsweight+'" type="text" data-attrstr="' + name + '" data-attrid="' + name2 + '" /></td>';
                tableHTML += '<input type="hidden" class="attrinput" id="guigeimgsrcinput'+i+'" value="'+attrspic_url+'" />';
                tableHTML += '<td width="20"><img class="guigeuploadimg" data-id="'+i+'" id="guigeimgsrc'+i+'" src="'+attrspic_url2+'" alt="" /></td>';
                tableHTML += '</tr>';
            }
            tableHTML += '</tbody>';
            tableHTML += '</table>';

            $('#lv_table_con').show();
            $('#lv_table').html(tableHTML);
            //触发点击事件要放在里面
            $(".guige1,.guige2").prop("readonly",true);
        });
        $('#update_table').trigger('click');
    });

</script>